<template>
  <router-view v-slot="{ Component, route }">
    <transition :name="slideName" mode="out-in">
      <keep-alive :include="cacheList">
        <component :is="Component" :key="route.path" />
      </keep-alive>
    </transition>
  </router-view>
  <!-- 底部导航栏 -->
  <TabBar v-if="!route.meta.hide" />
  <!-- 网络加载遮罩层 -->
  <var-overlay v-model:show="isOverlay">
    <var-loading type="disappear" />
  </var-overlay>
</template>

<script setup lang="ts">
const route = useRoute()
const loadStore = useLoadStore()
const { isOverlay, cacheList, slideName } = storeToRefs(loadStore)
watch(route, loadStore.sync_update_cacheList)
</script>

<style scoped lang="less">
.slide-left-enter-active {
  animation-name: slide-left-in;
  animation-duration: 0.3s;
}
.slide-left-leave-active {
  animation-name: slide-left-out;
  animation-duration: 0.3s;
}
.slide-right-enter-active {
  animation-name: slide-right-in;
  animation-duration: 0.3s;
}
.slide-right-leave-active {
  animation-name: slide-right-out;
  animation-duration: 0.3s;
}

@keyframes slide-left-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-left-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slide-right-in {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-right-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
</style>
